<template>
  <view class="recruiter-home">
    <!-- 顶部信息栏 -->
    <view class="top-bar">
      <view class="company-info">
        <image src="/static/images/company-logo.png" class="company-logo" alt="公司logo"></image>
        <view class="info-text">
          <text class="company-name">智能飞行科技有限公司</text>
          <text class="auth-status">已认证企业</text>
        </view>
      </view>
      <button class="edit-btn" @click="editCompanyInfo">
        <i class="iconfont icon-edit"></i>
      </button>
    </view>
    
    <!-- 数据概览 -->
    <view class="data-overview">
      <view class="data-item">
        <text class="data-value">{{ activeJobs }}</text>
        <text class="data-label">活跃职位</text>
      </view>
      <view class="data-item">
        <text class="data-value">{{ newApplications }}</text>
        <text class="data-label">新申请</text>
      </view>
      <view class="data-item">
        <text class="data-value">{{ pendingInterviews }}</text>
        <text class="data-label">待面试</text>
      </view>
      <view class="data-item">
        <text class="data-value">{{ newMessages }}</text>
        <text class="data-label">新消息</text>
      </view>
    </view>
    
    <!-- 快捷操作 -->
    <view class="quick-actions">
      <button class="action-btn primary" @click="publishJob">
        <i class="iconfont icon-publish"></i>
        <text>发布新职位</text>
      </button>
      <button class="action-btn" @click="searchTalents">
        <i class="iconfont icon-search-person"></i>
        <text>搜索人才</text>
      </button>
      <button class="action-btn" @click="manageInterviews">
        <i class="iconfont icon-interview"></i>
        <text>面试管理</text>
      </button>
    </view>
    
    <!-- 职位管理 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">我的职位</text>
        <text class="more" @click="viewAllJobs">查看全部</text>
      </view>
      
      <view class="job-item" v-for="(job, index) in myJobs" :key="index">
        <view class="job-title-row">
          <text class="job-title">{{ job.title }}</text>
          <text class="job-status" :class="job.status === 'active' ? 'active' : 'expired'">
            {{ job.status === 'active' ? '活跃' : '已过期' }}
          </text>
        </view>
        
        <view class="job-stats">
          <view class="stat-item">
            <text class="stat-value">{{ job.applicants }}</text>
            <text class="stat-label">申请者</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ job.views }}</text>
            <text class="stat-label">浏览</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ job.interviews }}</text>
            <text class="stat-label">面试</text>
          </view>
          <view class="operation-btn" @click="manageJob(job.id)">
            <text>管理</text>
            <i class="iconfont icon-arrow-right"></i>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 最新申请 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">最新申请</text>
        <text class="more" @click="viewAllApplications">查看全部</text>
      </view>
      
      <view class="application-item" v-for="(app, index) in recentApplications" :key="index">
        <view class="applicant-info">
          <image :src="app.avatar" class="applicant-avatar" alt="求职者头像"></image>
          <view class="applicant-details">
            <text class="applicant-name">{{ app.name }}</text>
            <text class="applicant-position">{{ app.appliedPosition }}</text>
            <text class="application-time">{{ app.applyTime }}</text>
          </view>
        </view>
        
        <view class="application-actions">
          <button class="action reject" @click="rejectApplication(app.id)">拒绝</button>
          <button class="action accept" @click="acceptApplication(app.id)">邀请面试</button>
        </view>
      </view>
    </view>
    
    <helang-tabBar></helang-tabBar>
  </view>
</template>

<script>
import helangTabBar from '@/components/helang-tabBar/helang-tabBar.vue'
export default {
  components:{
	  helangTabBar
  },
  data() {
    return {
      // 数据统计
      activeJobs: 5,
      newApplications: 8,
      pendingInterviews: 3,
      newMessages: 12,
      
      // 我的职位列表
      myJobs: [
        {
          id: 1,
          title: '无人机算法工程师',
          status: 'active',
          applicants: 24,
          views: 156,
          interviews: 5
        },
        {
          id: 2,
          title: '无人机飞手',
          status: 'active',
          applicants: 42,
          views: 289,
          interviews: 8
        },
        {
          id: 3,
          title: '无人机产品经理',
          status: 'expired',
          applicants: 15,
          views: 98,
          interviews: 2
        }
      ],
      
      // 最新申请
      recentApplications: [
        {
          id: 101,
          avatar: '/static/images/user1.png',
          name: '张明',
          appliedPosition: '无人机算法工程师',
          applyTime: '今天 09:32',
          resumeId: 'res1001'
        },
        {
          id: 102,
          avatar: '/static/images/user2.png',
          name: '李华',
          appliedPosition: '无人机飞手',
          applyTime: '昨天 15:47',
          resumeId: 'res1002'
        }
      ]
    };
  },
  onLoad() {
    // 检查用户角色
    this.checkUserRole();
    // 加载数据
    this.loadRecruiterData();
  },
  methods: {
    // 检查用户角色是否正确
    checkUserRole() {
      const role = uni.getStorageSync('selectedRole');
      if (role !== 'recruiter') {
        uni.redirectTo({
          url: '/pages/roleSelect/roleSelect'
        });
      }
    },
    
    // 加载招聘者数据
    loadRecruiterData() {
      // 实际项目中这里会调用API加载数据
      uni.showLoading({ title: '加载中...' });
      setTimeout(() => {
        uni.hideLoading();
      }, 800);
    },
    
    // 发布新职位
    publishJob() {
      uni.navigateTo({
        url: '/pages/recruiter/publishJob'
      });
    },
    
    // 搜索人才
    searchTalents() {
      uni.navigateTo({
        url: '/pages/recruiter/searchTalents'
      });
    },
    
    // 管理面试
    manageInterviews() {
      uni.navigateTo({
        url: '/pages/recruiter/interviews'
      });
    },
    
    // 查看所有职位
    viewAllJobs() {
      uni.navigateTo({
        url: '/pages/recruiter/allJobs'
      });
    },
    
    // 管理单个职位
    manageJob(jobId) {
      uni.navigateTo({
        url: `/pages/recruiter/jobManage?id=${jobId}`
      });
    },
    
    // 查看所有申请
    viewAllApplications() {
      uni.navigateTo({
        url: '/pages/recruiter/allApplications'
      });
    },
    
    // 拒绝申请
    rejectApplication(appId) {
      uni.showModal({
        title: '确认拒绝',
        content: '确定要拒绝该申请者吗？',
        success: (res) => {
          if (res.confirm) {
            this.recentApplications = this.recentApplications.filter(item => item.id !== appId);
            this.newApplications--;
            uni.showToast({ title: '已拒绝', icon: 'none' });
          }
        }
      });
    },
    
    // 接受申请，邀请面试
    acceptApplication(appId) {
      uni.navigateTo({
        url: `/pages/recruiter/sendInterview?id=${appId}`
      });
    },
    
    // 编辑公司信息
    editCompanyInfo() {
      uni.navigateTo({
        url: '/pages/recruiter/editCompany'
      });
    }
  }
};
</script>

<style scoped>
.recruiter-home {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 100rpx;
}

.top-bar {
  background-color: #fff;
  padding: 25rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #f1f5f9;
}

.company-info {
  display: flex;
  align-items: center;
}

.company-logo {
  width: 90rpx;
  height: 90rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.info-text {
  display: flex;
  flex-direction: column;
}

.company-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #1e293b;
  margin-bottom: 5rpx;
}

.auth-status {
  font-size: 24rpx;
  color: #10b981;
  background-color: #f0fdf4;
  padding: 2rpx 15rpx;
  border-radius: 15rpx;
  width: fit-content;
}

.edit-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-btn .iconfont {
  font-size: 30rpx;
  color: #64748b;
}

.data-overview {
  display: flex;
  background-color: #fff;
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #f1f5f9;
}

.data-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.data-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #1e293b;
  margin-bottom: 10rpx;
}

.data-label {
  font-size: 24rpx;
  color: #64748b;
}

.quick-actions {
  display: flex;
  padding: 25rpx;
  background-color: #fff;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.action-btn {
  flex: 1;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 15rpx;
  background-color: #f1f5f9;
  color: #64748b;
  font-size: 26rpx;
}

.action-btn.primary {
  background-color: #3b82f6;
  color: #fff;
}

.action-btn .iconfont {
  font-size: 40rpx;
  margin-bottom: 10rpx;
}

.section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #1e293b;
}

.more {
  font-size: 26rpx;
  color: #3b82f6;
}

.job-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f1f5f9;
}

.job-item:last-child {
  border-bottom: none;
}

.job-title-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

.job-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1e293b;
}

.job-status {
  font-size: 24rpx;
  padding: 3rpx 15rpx;
  border-radius: 15rpx;
}

.job-status.active {
  background-color: #dbeafe;
  color: #2563eb;
}

.job-status.expired {
  background-color: #f8fafc;
  color: #94a3b8;
}

.job-stats {
  display: flex;
  align-items: center;
}

.stat-item {
  margin-right: 30rpx;
}

.stat-value {
  font-size: 26rpx;
  font-weight: bold;
  color: #1e293b;
  margin-right: 5rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #64748b;
}

.operation-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  color: #3b82f6;
  font-size: 26rpx;
}

.operation-btn .iconfont {
  font-size: 24rpx;
  margin-left: 5rpx;
}

.application-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f1f5f9;
}

.application-item:last-child {
  border-bottom: none;
}

.applicant-info {
  display: flex;
  align-items: center;
}

.applicant-avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.applicant-details {
  display: flex;
  flex-direction: column;
}

.applicant-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #1e293b;
  margin-bottom: 5rpx;
}

.applicant-position {
  font-size: 24rpx;
  color: #64748b;
  margin-bottom: 5rpx;
}

.application-time {
  font-size: 22rpx;
  color: #94a3b8;
}

.application-actions {
  display: flex;
  gap: 15rpx;
}

.action {
  width: 120rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 24rpx;
  border-radius: 8rpx;
}

.action.reject {
  background-color: #f1f5f9;
  color: #64748b;
}

.action.accept {
  background-color: #3b82f6;
  color: #fff;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  border-top: 1rpx solid #f1f5f9;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  color: #94a3b8;
}

.tab-item .iconfont {
  font-size: 40rpx;
  margin-bottom: 5rpx;
}

.tab-item.active {
  color: #3b82f6;
}
</style>
